<script lang="ts" setup>
import { RouteMap, useRouter } from '@/router';
import { useLocale } from '@/locale/locale';

defineProps<{
  data: any[];
}>();

const { t } = useLocale();
const router = useRouter();

const getNameByLocale = (array: any[]) => {
  const lang = uni.getStorageSync('language') || 'zh';
  const el = array.find((s) => s.language === lang)!;
  return el ? el.content : '';
};
</script>

<template>
  <view class="home-recommends">
    <view class="flex justify-between items-center">
      <text class="text-xl text-primary font-medium">
        {{ t('LHKey_curatedForYou') }}
      </text>
      <view class="flex items-center" @click="router.to(RouteMap.hotels)">
        <text class="text-base text-secondary">
          {{ t('LKey_discover') }}
        </text>
        <image class="w-4 h-4" src="/static/icon_arrow_right.png" />
      </view>
    </view>
    <scroll-view class="home-recommends__list" scroll-x="true">
      <view
        v-for="item in data"
        :key="item.uid"
        class="home-recommends__item"
        @click="
          router.to(RouteMap.hotelDetails, {
            id: item.id,
            puid: item.uid
          })
        "
      >
        <image :src="item.cover" class="home-recommends__cover" />
        <view class="home-recommends__meta">
          <text class="text-base text-primary font-medium">
            {{ getNameByLocale(item.nameLanguage) }}
          </text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
.home-recommends {
  width: 670rpx;
  padding-bottom: 80rpx;
  margin-left: 40rpx;
  margin-right: 40rpx;

  &__list {
    margin-top: 26rpx;
    white-space: nowrap;
  }

  &__item {
    display: inline-block;
    width: 314rpx;

    & + & {
      margin-left: 20rpx;
    }
  }

  &__cover {
    display: block;
    width: 314rpx;
    height: 460rpx;
    border-radius: 28rpx 28rpx 0 0;
  }

  &__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 36rpx 20rpx;
    background-color: white;
    border-radius: 0 0 28rpx 28rpx;
  }

  &__text {
    font-size: 20rpx;
    line-height: 28rpx;
    color: #999999;
  }
}
</style>
